<template>
  <div class="carpisel">
    <div class="block">
      <span class="demonstration"></span>
      <el-carousel
        trigger="click"
        :height="height"
        :style="{ width: width }"
        :indicator-position="Indicator"
      >
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <h3 class="small">
            <img :src="item.imgUrl" alt="" :height="height" :width="width" />
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 宽度和高度
    width: {
      type: String,
      default: function () {
        return '400px'
      }
    },
    height: {
      type: String,
      default: function () {
        return '300px'
      }
    },
    // 轮播图的图片数组
    imgList: {
      type: Array,
      default: function () {
        return [1, 2, 3, 4]
      }
    },
    // 是否显示小圆点 true none
    Indicator: {
      type: String,
      default: function () {
        return 'true'
      }
    }
  },
  mounted() {
    console.log(this.height)
  }
}
</script>
<style>
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__button {
  width: 10px;
  height: 10px;
  background: rgb(0, 0, 0);
  border-radius: 50%;
}
.el-carousel__arrow {
  background: rgba(0, 0, 0, 0.4);
}
.el-carousel__arrow:hover {
  background: rgba(0, 0, 0, 1);
}
</style>
